<template>
  <div class="audience-list">
    <div class="title">在线观众</div>
    <div class="top">
      <!-- <div class="input">搜索昵称/ID</div> -->
      <el-input
        v-model="input2"
        style="width: 200px; height: 32px"
        placeholder="搜索昵称/ID"
        :suffix-icon="Search"
      />
      <div class="spend">
        <span style="font-size: 24px">{{ spend }}</span>
        <span style="font-size: 12px" class="m-t-6">近3天平均消费</span>
      </div>
    </div>
    <!-- 在线观众列表 -->
    <el-scrollbar ref="parentRef" class="list">
      <div class="infinite-list" style="overflow: auto">
        <div v-for="i in 30" class="item infinite-list-item">
          <!-- 头像 -->
          <div
            class="left"
            @click="
              (e) => {
                buttonRef = e.currentTarget;
                visible = !visible;
              }
            "
          ></div>

          <div class="center">
            <span>逸风</span>
            <div style="color: rgba(255, 255, 255, 0.6); display: flex">
              <span>1623</span>
              <span class="icon"></span>
            </div>
          </div>

          <div class="right" style="cursor: pointer">关注</div>
        </div>
        <!-- 头像点开的用户信息弹窗 -->
        <el-tooltip
          ref="tooltipRef"
          :visible="visible"
          :popper-options="{
            modifiers: [
              {
                name: 'computeStyles',
                options: {
                  adaptive: false,
                  enabled: false,
                },
              },
            ],
          }"
          effect="gray"
          :virtual-ref="buttonRef"
          virtual-triggering
          popper-class="singleton-tooltip"
          placement="right"
          append-to="body"
          :offset="offsetValue"
        >
          <template #content>
            <div class="personal-info">
              <div class="top pad-22">
                <div class="avator"></div>
                <div class="home">个人主页</div>
                <el-tooltip effect="lightgray">
                  <el-icon color="#fff"><MoreFilled /></el-icon>
                  <template #content>
                    <div class="more-box">
                      <li>拉黑</li>
                      <li>禁言</li>
                      <li>设置管理</li>
                    </div>
                  </template>
                </el-tooltip>
              </div>
              <div class="nickname pad-22">小包子</div>
              <div class="tags pad-22">
                <span class="item"></span>
                <span class="item"></span>
                <span class="item"></span>
                <span class="item"></span>
              </div>
              <div class="fans pad-22">粉丝61 关注28</div>
              <div class="info pad-22">
                <span>G-1-187-75</span>
                <span class="m-l-10 m-r-10">SUB</span>
                <span>四川·成都</span>
              </div>
              <div class="sign pad-22">难道说不上我这条船，你就能回头了吗？</div>
              <div class="relationship pad-22">
                <div class="item">
                  <div class="person">
                    <div class="avator"></div>
                    <span class="nickname">待我胡须及腰</span>
                  </div>
                  <img class="center" :src="first" />
                  <div class="person">
                    <div class="avator"></div>
                    <span class="nickname">待我胡须及腰</span>
                  </div>
                </div>
                <div class="item">
                  <div class="person">
                    <div class="avator"></div>
                    <span class="nickname">待我胡须及腰</span>
                  </div>
                  <img class="center" :src="second" />
                  <div class="person">
                    <div class="avator"></div>
                    <span class="nickname">待我胡须及腰</span>
                  </div>
                </div>
              </div>
              <div class="footer">
                <div
                  v-for="(item, index) in clickEventList"
                  :key="index"
                  class="item"
                  @click="item.event(item.name)"
                >
                  {{ item.name }}
                </div>
              </div>
            </div>
          </template>
        </el-tooltip>
      </div>
    </el-scrollbar>
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, onBeforeUnmount, nextTick } from "vue";
import { throttle } from "lodash-es";
import first from "@/assets/live/list/first-cp.svg";
import second from "@/assets/live/list/second-cp.svg";
import { Search } from "@element-plus/icons-vue";

// 响应式数据·
const spend = ref("1.2k");
const buttonRef = ref(null);
const tooltipRef = ref();
const visible = ref(false);
const parentRef = ref(null);
const offsetValue = ref(0);

// 事件处理（使用闭包优化）
const createEventHandler = (name: string) => () => {
  console.log(name);
};

const clickEventList = ref([
  { name: "邀请上麦", event: createEventHandler("invite") },
  { name: "私聊", event: createEventHandler("private-chat") },
  { name: "@TA", event: createEventHandler("mention") },
  { name: "踢出房间", event: createEventHandler("kick") },
  { name: "互相关注", event: createEventHandler("follow") },
]);

// 工具函数：安全获取元素宽度
const getSafeWidth = (el?: HTMLElement | null): number => {
  return el?.offsetWidth || 0;
};

// 计算偏移量（带节流）
const calculateOffset = throttle(() => {
  nextTick(() => {
    const scrollbarEl = parentRef.value?.$el;
    if (!scrollbarEl) return;

    // 获取实际滚动容器宽度（.el-scrollbar__wrap）
    const wrapEl = scrollbarEl.querySelector?.(".el-scrollbar__wrap");
    const parentWidth = getSafeWidth(wrapEl);

    // 更精确的偏移计算（示例：右侧留出35px空间）
    offsetValue.value = parentWidth;
  });
}, 100); // 100ms节流

// 生命周期管理
let resizeObserver: ResizeObserver | null = null;

onMounted(() => {
  // 初始计算
  calculateOffset();

  // 使用 ResizeObserver 替代 window.resize
  resizeObserver = new ResizeObserver(calculateOffset);

  const wrapEl = parentRef.value?.$el?.querySelector(".el-scrollbar__wrap");
  if (wrapEl) {
    resizeObserver.observe(wrapEl);
  }
});

onBeforeUnmount(() => {
  // 清理资源
  resizeObserver?.disconnect();
  calculateOffset.cancel(); // 取消lodash节流函数的pending调用
});
</script>

<style lang="scss" scoped>
.singleton-tooltip {
  transition: transform 0.3s var(--el-transition-function-fast-bezier);
}
.personal-info {
  color: #fff;
  padding: 0;
  padding-top: 23px;

  .pad-22 {
    padding: 0 22px;
  }
  .top {
    display: flex;
    align-items: center;
    .avator {
      width: 55px;
      height: 55px;
      border-radius: 50%;
      background-color: lightcoral;
    }
    .home {
      font-size: 14px;
      padding: 4px 42px;
      background: #2f2f2f;
      //border: 1px solid rgba(255, 255, 255, 0.5);
      background: #5e5e5e;
      border-radius: 4px;
      margin: 0 12px;
    }
    .more {
      font-size: 18px;
    }
    .el-input__suffix {
      color: #3662ec;
    }
  }
  .nickname {
    font-size: 16px;
    margin-top: 4px;
  }
  .tags {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    .item {
      width: 44px;
      height: 16px;
      background-color: orange;
    }
  }
  .fans {
    font-size: 13px;
    margin: 10px 0 14px;
  }
  .info {
    color: #9e9e9e;
  }
  .sign {
    font-size: 10px;
    margin-top: 4px;
    color: #9e9e9e;
  }
  .relationship {
    margin-top: 14px;
    .item {
      display: flex;
      align-items: flex-start;
      margin-bottom: 12px;
      .person {
        display: flex;
        flex-direction: column;
        align-items: center;
        .avator {
          width: 38px;
          height: 38px;
          border-radius: 50%;
          background-color: lightcoral;
        }
        .nickname {
          font-size: 10px;
          margin-top: 9px;
        }
      }

      .center {
        width: 60px;
        height: 38px;
        margin: 0 18px;
      }
    }
  }
  .footer {
    padding: 14px 22px;
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    cursor: default;
  }
}
.audience-list {
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  height: 100%;
  // height: calc(100vh - 110px);
  .title {
    font-size: 12px;
  }
  .top {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 16px;
    .input {
      background-color: #fff;
      min-width: 100px;
      width: 184px;
      height: 22px;
      box-sizing: border-box;
      border-radius: 2px;
      color: rgba(0, 0, 0, 0.6);
      padding: 0 4px;
    }
    .spend {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      margin-left: 10px;
      min-width: 100px;
    }
  }
  .list {
    margin-top: 10px;
    width: 100%;
    // height: calc(1200px - 240px);
    height: calc(100vh - 60px) !important;

    display: flex;
    flex-direction: column;
    padding: 0 20px;
    .item {
      margin-top: 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .left {
        background-color: lightblue;
        background-image: url("@/assets/live/headPportrait.jpg");
        background-size: 100% 100%;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        margin-right: 8px;
        cursor: pointer;
      }
      .center {
        display: flex;
        flex-direction: column;
        flex: 1;
        font-size: 12px;
      }
      .right {
        background: linear-gradient(270deg, #f59343 0%, #f80759 100%);
        border-radius: 57px;
        width: 36px;
        height: 19px;
        text-align: center;
        line-height: 19px;
        font-size: 10px;
      }
      .right:hover {
        background: linear-gradient(60deg, rgba(248, 7, 87, 0.7) 00%, rgba(245, 147, 67, 0.6) 100%);
        // background: rgba(255, 255, 255, 0.5);
      }
    }
  }
  .icon {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: orange;
  }
}
::v-deep .el-popper.is-customized {
  background: #2f2f2f;
  border: 1px solid rgba(255, 255, 255, 0.5);
  padding: 0;
}

::v-deep .el-popper.is-customized .el-popper__arrow::before {
  background: #2f2f2f;
  border: 1px solid rgba(255, 255, 255, 0.5);
  right: 0;
}

// ::v-deep .el-popper.is-customized {
//   /* Set padding to ensure the height is 32px */
//   padding: 6px 12px;
//   background: linear-gradient(90deg, rgb(159, 229, 151), rgb(204, 229, 129)) !important;
// }

// ::v-deep .el-popper.is-customized .el-popper__arrow::before {
//   background: linear-gradient(45deg, #b2e68d, #bce689) !important;
//   right: 0;
// }
.more-box {
  padding: 11px 14px;
  color: #fff;
  li {
    cursor: default;
    font-size: 14px;
    padding: 8px 0;
  }
}
</style>
